<style scoped>
    .layout{
        border: 1px solid #d7dde4;
        background: #f5f7f9;
        position: relative;
        border-radius: 4px;
        overflow: hidden;
    }
    .layout-header-bar{
        background: #fff;
        box-shadow: 0 1px 1px rgba(0,0,0,.1);
    }
    .layout-logo-left{
        width: 90%;
        height: 30px;
        /* background: #5b6270; */
        border-radius: 3px;
        margin: 15px auto;
    }
    .menu-icon{
        transition: all .3s;
    }
    .rotate-icon{
        transform: rotate(-90deg);
    }
    .menu-item span{
        display: inline-block;
        overflow: hidden;
        width: 69px;
        text-overflow: ellipsis;
        white-space: nowrap;
        vertical-align: bottom;
        transition: width .2s ease .2s;
    }
    .menu-item i{
        transform: translateX(0px);
        transition: font-size .2s ease, transform .2s ease;
        vertical-align: middle;
        font-size: 16px;
    }
    .collapsed-menu span{
        width: 0px;
        transition: width .2s ease;
    }
    .collapsed-menu i{
        transform: translateX(5px);
        transition: font-size .2s ease .2s, transform .2s ease .2s;
        vertical-align: middle;
        font-size: 22px;
    }
</style>
<template>
    <div class="layout">
        <Layout>
            <Sider ref="side1" hide-trigger collapsible :collapsed-width="40"  style="background:white;">
                 <Tree :data="data1" :render="renderContent" ref="tree4"></Tree>
            </Sider>
            <Layout>
                <Content :style="{minHeight: '260px'}">
                    <Button type="primary" @click="creatData()">增加</Button>
                    <Table border :columns="columns7" :data="data6" style="color:black"></Table>
                    <Page :total="100" show-sizer @on-change="onChangePage" />
                </Content>
            </Layout>
        </Layout>
        <Modal
        v-model="modal1"
        title="Common Modal dialog box title"
        @on-ok="ok"
        @on-cancel="cancel">
         <Form ref="formValidate" :model="formValidate" :rules="ruleValidate" :label-width="80">
            <!-- <FormItem label="cateId" prop="cateId">
            <Input v-model="this.mid" placeholder="Enter your title" ></Input>
        </FormItem> -->
        <FormItem label="新闻标题" prop="title">
            <Input v-model="formValidate.title" placeholder="Enter your title"></Input>
        </FormItem>
        <FormItem label="新闻类别" prop="category">
            <Input v-model="formValidate.category" placeholder="Enter your category"></Input>
        </FormItem>
        <FormItem label="新闻作者" prop="author">
            <Input v-model="formValidate.author" placeholder="Enter your author"></Input>
        </FormItem>
        <FormItem label="新闻内容" prop="massage">
            <Input v-model="formValidate.massage" type="textarea" :autosize="{minRows: 2,maxRows: 5}" placeholder="Enter something..."></Input>
        </FormItem>
        <FormItem label="评论时间">
            <Row>
                <Col span="11">
                    <FormItem prop="releasetime">
                        <DatePicker type="date" placeholder="Select date" v-model="formValidate.releasetime"></DatePicker>
                    </FormItem>
                </Col>
            </Row>
        </FormItem>
        <FormItem label="评论方式" prop="fangshi">
            <RadioGroup v-model="formValidate.fangshi">
                <Radio label="male">pc</Radio>
                <Radio label="female">tel</Radio>
            </RadioGroup>
        </FormItem>
        <FormItem label="评论内容" prop="content">
            <Input v-model="formValidate.content" type="textarea" :autosize="{minRows: 2,maxRows: 5}" placeholder="Enter something..."></Input>
        </FormItem>
        <FormItem label="评论地点" prop="local">
            <Select v-model="formValidate.local" placeholder="Select your city">
                <Option value="北京">北京</Option>
                <Option value="上海">上海</Option>
                <Option value="深圳">深圳</Option>
            </Select>
        </FormItem>
        <FormItem label="评论数量" prop="number">
            <Input v-model="formValidate.number" placeholder="Enter your number"></Input>
        </FormItem>
        <FormItem label="评论关键" prop="keywords">
            <Input v-model="formValidate.keywords" placeholder="Enter your keywords"></Input>
        </FormItem>
        <FormItem>
            <Button type="primary" @click="handleSubmit(id)">Submit</Button>
            <Button @click="handleReset('formValidate')" style="margin-left: 8px">Reset</Button>
        </FormItem>
    </Form>
    </Modal>
    </div>
    
</template>
<script>
   export default {
        data () {
            return {
                // 表单
                id:"",
                mid:'',
                formValidate: {
                    title:"",
                    category:"",
                    author:"",
                    massage:"",
                    releasetime:"",
                    fangshi:"",
                    content:"",
                    local:"",
                    number:"",
                    keywords:"",
                    cateId:""
                },ruleValidate: {
                    title: [
                        { required: true, message: 'The title cannot be empty', trigger: 'blur' }
                    ],
                    category: [
                        { required: true, message: 'category cannot be empty', trigger: 'blur' },
                        // { type: 'email', message: 'Incorrect email format', trigger: 'blur' }
                    ],
                    local: [
                        { required: true, message: 'Please select the city', trigger: 'change' }
                    ],
                    author: [
                        { required: true, message: 'author cannot be empty', trigger: 'blur' }
                    ],
                    message: [
                        { required: true, message: 'message cannot be empty', trigger: 'blur' }
                    ],
                    fangshi: [
                        { required: true, message: 'Please select the fangshi', trigger: 'change' }
                    ],
                    content: [
                        { required: true, message: 'content cannot be empty', trigger: 'blur' }
                    ],
                    number: [
                        { required: true, message: 'number cannot be empty', trigger: 'blur' }
                    ],
                    keywords: [
                        { required: true, message: 'keywords cannot be empty', trigger: 'blur' }
                    ],
                    // releasetime: [
                    //     { required: true, message: 'Please select time', trigger: 'blur' }
                    // ],
                    desc: [
                        { required: true, message: 'Please enter a personal introduction', trigger: 'blur' },
                        { type: 'string', min: 20, message: 'Introduce no less than 20 words', trigger: 'blur' }
                    ]
                },
                 columns7: [
                    {
                        title: '新闻标题',
                        key: 'title',
                    },
                    {
                        title: '新闻类别',
                        key: 'category',    
                        // width:80
                    },
                    {
                        title: '新闻内容',
                        key: 'massage',
                        width:150,
                    },
                    {
                        title: '评论作者',
                        key: 'author',
                        // width:80
                    },
                    {
                        title: '评论内容',
                        key: 'content',
                        // width:80
                    },
                    {
                        title: '评论时间',
                        key: 'releasetime',
                        // width:80
                    },
                    {
                        title: '评论地点',
                        key: 'local',
                        // width:80
                    },
                    {
                        title: '评论数量',
                        key: 'number',
                        // width:80
                    },
                    {
                        title: '评论方式',
                        key: 'fangshi',
                        // width:80
                    },
                    {
                        title: '评论关键',
                        key: 'keywords',
                        // width:80
                    },
                    {
                        title: '操作',
                        key: 'action',
                        width: 130,
                        padding:0,
                        align: 'center',
                        render: (h, params) => {
                            return h('div', [
                                h('Button', {
                                    props: {
                                        type: 'primary',
                                        size: 'small'
                                    },
                                    style: {
                                        marginRight: '5px'
                                    },
                                    on: {
                                        click: () => {
                                            this.modal1=true
                                            // this.show(params.index)
                                            this.editData(params.row._id);
                                            this.id=params.row._id;
                                            // console.log(params.row._id);
                                        }
                                    }
                                }, '修改'),
                                h('Button', {
                                    props: {
                                        type: 'error',
                                        size: 'small'
                                    },
                                    on: {
                                        click: () => {
                                            // console.log(params.row._id);
                                            this.remove(params.row._id);
                                        }
                                    }
                                }, '删除')
                            ]);
                        }
                    }
                ],
                data1: [],
                data6: [],
                rows: 10,
                total:0,
                page:1,
                modal1: false,
                cid:'5c09c8396193d31f2816d454'
            }
        },
        methods:{
            onChangePage(page){
                this.page=page;
                this.getnews(this.cid);
            },
            renderContent (h, { root, node, data }) {
                return h('span', {
                    style: {
                        display: 'inline-block',
                        width: "100%",
                        cursor: 'pointer'
                    },on: {
                            click: () => { 
                            console.log(data._id);
                            this.mid=data._id;
                            this.getnews(data._id)
                             }
                    }
                }, [
                    h('span', [
                        h('Icon', {
                            props: {
                                type: 'ios-paper-outline'
                            },
                            style: {
                                marginRight: '8px'
                            }
                        }),
                        h('span', data.title)
                    ]),
                ]);
            },
            getnews(id){
                this.cid=id;
                this.axios({
                    url:'http://localhost:3000/classify/list',
                    method:'post',
                    data:{                   
                        page:this.page,
                        rows:this.rows,
                        cateId:id
                    }
                }).then(res=>{
                    console.log(res.data.rows)
                    this.data6=res.data.rows;
                    this.total=res.data.total;
                })
            },
            handleSubmit (id) {
                console.log(id);
                this.formValidate.cateId=this.cid;
               console.log(this.formValidate);
            //    var formData=this.formValidate;
            //    console.log(formData.id);
                if(id!=""){
                    // delete this.formValidate.cid;
                    this.axios({
                        url:`http://localhost:3000/classify/${id}`,
                        method:'put',
                        data:this.formValidate
                    }).then(res=>{
                        this.getnews(this.cid);
                        this.$refs.formValidate.resetFields(); //表单清空
                        this.modal1=false;
                    })
                }else{
                    // delete formData._id;
                    this.axios({
                        url:'http://localhost:3000/classify',
                        method:'post',
                        data:this.formValidate
                    }).then(res=>{
                        // this.getlist();
                        this.getnews(this.cid);
                        this.$refs.formValidate.resetFields(); //表单清空

                        this.modal1=false;
                    })
                }
            },
            handleReset (name) {
                this.$refs[name].resetFields();
            },
            ok () {
                this.$Message.info('Clicked ok');
            },
            cancel () {
                this.$Message.info('Clicked cancel');
            },
            getnlist(){
                this.axios({
                    url:'http://10.31.161.18:3000/cate/list/3',
                    method:'post'
                }).then(res=>{
                    this.data1=res.data;
                })
            },
            editData (id) {
                 this.axios({
                     url:`http://localhost:3000/classify/${id}`,
                     method:'get'
                 }).then(res=>{
                     this.formValidate=res.data;
                     this.modal1=true;
                 })
            },
            creatData(){
                this.modal1=true;
            },
            remove (id) {
                console.log(id)
               this.$Modal.confirm({
                    title: '确认删除',
                    content: '<p>Are you sure?</p>',
                    onOk: () => {
                        this.$Message.info('Clicked ok');
                        this.axios({
                            url:`http://localhost:3000/classify/${id}`,
                            method:'delete'
                        }).then(res=>{
                            this.getnews();
                        })
                    },
                    onCancel: () => {
                        this.$Message.info('Clicked cancel');
                    }
                });    
            }
        },
        mounted(){
            this.getnlist();
            // this.getnews();
        }
    }
</script>